<template>
   <div class="top">
     <div class="content">
       <div class="left" v-on:click="goHome" >
         <img src="../../assets/images/logo.png" alt="">
         <p>贵医通 统一挂号预约平台</p>
       </div>
       <div class="right">
         <p class="help">帮助中心</p>
         <!-- 显示用户登录注册 -->
         <p class="login" v-on:click="login" v-if="!userStore.userInfo.name">登录/注册</p>
         <!-- 显示用户账号信息 -->
         <el-dropdown v-else >
           <span class="el-dropdown-link">
             {{userStore.userInfo.name}}
            <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item v-on:click="goUser('/user/certificate')" >实名认证</el-dropdown-item>
               <el-dropdown-item v-on:click="goUser('/user/order')" >挂号订单</el-dropdown-item>
               <el-dropdown-item v-on:click="goUser('/user/patient')" >就诊人管理</el-dropdown-item>
               <el-dropdown-item v-on:click="logout">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
       </div>
     </div>
   </div>
</template>

<script setup lang="ts">
import {ArrowDown} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
//获取user仓库的数据 (visiable) 可用于控制login组件的对话框显示与隐藏
import useUserStore from "@/store/modules/user.ts";

let $router = useRouter();
let userStore = useUserStore();
//编程式导航,跳转到首页
const goHome = () => {
  $router.push({path:"/home"})
};
//点击登录/注册按钮,弹出对话框
const login = ()=> {
  userStore.visible = true;
}

//点击右上角的路由菜单进行路由跳转
const goUser = (path:string) => {
  //编程式路由导航跳转
  $router.push({path:path});
};

// 退出登录
const logout = () => {
  // 清空Pinia仓库和本地用户相关数据
  userStore.logout();
  // 跳转到首页
  $router.push({path:"/home"});
};



</script>

<style scoped lang="scss">
.top {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 70px;
  background: #fff;
  display: flex;
  justify-content: center;
  .content {
    width: 1200px;
    height: 70px;
    background: white;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      p {
        font-size: 20px;
        color: #55a6fe;
      }
    }
    .right {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #bbb;
      .help {
        margin-right: 10px;
      }
    }
  }

}

</style>

